<template>
   <el-card class="box-card">
    <div slot="header" class="clearfix">
    <h1 class="container-title fl">添加货物类型</h1>
    </div>
    <!-- 在这里写数据 -->
    <el-card class="box-card-min">
    <div slot="header" class="clearfix">
        <!-- 邮箱 -->
  <el-form status-icon   label-width="80px" class="demo-ruleForm">
  <el-form-item label="设备类型">
    <el-select  v-model="e_name" style="width:250px;">
     <el-option  v-for="role in role_list" :label="role.name" :key="role.id" :value="role.name"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="名称">
    <el-input v-model="goodname" style="width:250px;"></el-input>
  </el-form-item>
  <el-form-item label="延迟开始">
     <el-input-number v-model="num" controls-position="right"  :min="0" :max="1275" style='width:250px;' :step='5'></el-input-number>
  </el-form-item>
  <el-form-item label="描述">
    <el-input v-model="des" style="width:250px;"></el-input>
  </el-form-item>
  <el-form-item label="记录间隔">
   <el-input-number v-model="rnum" controls-position="right"  :min="0.5" :max="127.5" style='width:250px;' :step='0.5'></el-input-number>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="upptype" style="width:250px;">确认修改</el-button>
  </el-form-item>
</el-form>
</div>
</el-card>
<!-- 理想温度范围i -->
<el-card>
                    <el-form>
                        <el-form-item label="理想温度范围:" style="font-size:12px;">
                            <el-input-number v-model="NumberData.num1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                            </el-input-number>
                            ———
                            <el-input-number v-model="NumberData.num2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                            </el-input-number>
                        </el-form-item>
                    </el-form>

                </el-card>
<!-- 报警设备1 -->
       <el-card class="box-card-min1">
             <el-container>
                        <el-header>报警设置-主警报1
                            <el-checkbox v-model="Checked.check">备选项</el-checkbox>
                        </el-header>
                        <el-main v-if="!Checked.check">
                            <span style="font-size:12px;color:red;">未开启报警设置</span>
                        </el-main>
                        <el-main v-if="Checked.check">
                            <el-form label-position="top">
                                <el-form-item label="报警类型:">
                                    <el-select v-model="BaoJingTypeValue.value" placeholder="请选择报警类型">
                                        <el-option v-for="(item,index) in BaoJingType" :key="index" :label="item.label" :value='item.value'>
                                        </el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="理想温度范围:" style="font-size:12px;">
                                    <div v-if="BaoJingTypeValue.value != '单温度范围-累计事件'">
                                        <el-input-number v-model="BaoJingWenDuValue.value.num" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input-number>
                                    </div>

                                    <div v-if="BaoJingTypeValue.value === '单温度范围-累计事件'">
                                        <el-input-number v-model="BaoJingWenDuValue.value.num1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input-number>
                                        ———
                                        <el-input-number v-model="BaoJingWenDuValue.value.num2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input-number>
                                    </div>
                                </el-form-item>

                                <el-form-item label="阈值">
                                    <el-input v-model="YuZhiValue.value" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                    </el-input>
                                    <div class="YuZhi-div">
                                        <el-select v-model="YuZhiDanWeiValue.value" placeholder="请选择单位" class="YuZhi-div-select">
                                            <el-option v-for="(item,index) in YuZhiDanWei" :key="index" :label="item.label" :value='item.value'>
                                            </el-option>
                                        </el-select>
                                    </div>

                                </el-form-item>
                            </el-form>
                        </el-main>
                    </el-container>
               

                </el-card>




<!-- 报警设备2 -->
<el-card class="box-card-min1" style="margin-left:10px">

                        <el-container>
                            <el-header>报警设置-主警报2
                                <el-checkbox v-model="Checked.check1">备选项</el-checkbox>
                            </el-header>
                            <el-main v-if="!Checked.check1">
                                <span style="font-size:12px;color:red;">未开启报警设置</span>
                            </el-main>
                            <el-main v-if="Checked.check1">
                                <el-form label-position="top">
                                    <el-form-item label="报警类型:">
                                        <el-select v-model="BaoJingTypeValue.value1" placeholder="请选择报警类型">
                                            <el-option v-for="(item,index) in BaoJingType" :key="index" :label="item.label" :value='item.value'>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="理想温度范围:" style="font-size:12px;">
                                        <div v-if="BaoJingTypeValue.value1 != '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value1.num" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>

                                        <div v-if="BaoJingTypeValue.value1 === '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value1.num1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                            ———
                                            <el-input-number v-model="BaoJingWenDuValue.value1.num2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="阈值">
                                        <el-input v-model="YuZhiValue.value1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input>
                                        <div class="YuZhi-div">
                                            <el-select v-model="YuZhiDanWeiValue.value1" placeholder="请选择单位" class="YuZhi-div-select">
                                                <el-option v-for="(item,index) in YuZhiDanWei" :key="index" :label="item.label" :value='item.value'>
                                                </el-option>
                                            </el-select>
                                        </div>

                                    </el-form-item>
                                </el-form>
                            </el-main>
                        </el-container>

    </el-card >

<!-- 报警设备3 -->
<el-card class="box-card-min1" style="margin-left:10px">
               <el-container>
                            <el-header>报警设置-主警报3
                                <el-checkbox v-model="Checked.check2">备选项</el-checkbox>
                            </el-header>
                            <el-main v-if="!Checked.check2">
                                <span style="font-size:12px;color:red;">未开启报警设置</span>
                            </el-main>
                            <el-main v-if="Checked.check2">
                                <el-form label-position="top">
                                    <el-form-item label="报警类型:">
                                        <el-select v-model="BaoJingTypeValue.value2" placeholder="请选择报警类型">
                                            <el-option v-for="(item,index) in BaoJingType" :key="index" :label="item.label" :value='item.value'>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="理想温度范围:" style="font-size:12px;">
                                        <div v-if="BaoJingTypeValue.value2 != '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value2.num" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>

                                        <div v-if="BaoJingTypeValue.value2 === '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value2.num1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                            ———
                                            <el-input-number v-model="BaoJingWenDuValue.value2.num2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="阈值">
                                        <el-input v-model="YuZhiValue.value2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input>
                                        <div class="YuZhi-div">
                                            <el-select v-model="YuZhiDanWeiValue.value2" placeholder="请选择单位" class="YuZhi-div-select">
                                                <el-option v-for="(item,index) in YuZhiDanWei" :key="index" :label="item.label" :value='item.value'>
                                                </el-option>
                                            </el-select>
                                        </div>

                                    </el-form-item>
                                </el-form>
                            </el-main>
                        </el-container>
                        </el-card >

<!-- 报警设备4 -->
<el-card class="box-card-min1" style="margin-top:20px">
     <el-container>
                            <el-header>报警设置-主警报4
                                <el-checkbox v-model="Checked.check3">备选项</el-checkbox>
                            </el-header>
                            <el-main v-if="!Checked.check3">
                                <span style="font-size:12px;color:red;">未开启报警设置</span>
                            </el-main>
                            <el-main v-if="Checked.check3">
                                <el-form label-position="top">
                                    <el-form-item label="报警类型:">
                                        <el-select v-model="BaoJingTypeValue.value3" placeholder="请选择报警类型">
                                            <el-option v-for="(item,index) in BaoJingType" :key="index" :label="item.label" :value='item.value'>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="理想温度范围:" style="font-size:12px;">
                                        <div v-if="BaoJingTypeValue.value3 != '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value3.num" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>

                                        <div v-if="BaoJingTypeValue.value3 === '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value3.num1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                            ———
                                            <el-input-number v-model="BaoJingWenDuValue.value3.num2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="阈值">
                                        <el-input v-model="YuZhiValue.value3" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input>
                                        <div class="YuZhi-div">
                                            <el-select v-model="YuZhiDanWeiValue.value3" placeholder="请选择单位" class="YuZhi-div-select">
                                                <el-option v-for="(item,index) in YuZhiDanWei" :key="index" :label="item.label" :value='item.value'>
                                                </el-option>
                                            </el-select>
                                        </div>

                                    </el-form-item>
                                </el-form>
                            </el-main>
                        </el-container>

     </el-card >

<!-- 报警设备5 -->
<el-card class="box-card-min1" style="margin-left:10px;margin-top:20px">
    <el-container>
                            <el-header>报警设置-主警报5
                                <el-checkbox v-model="Checked.check4">备选项</el-checkbox>
                            </el-header>
                            <el-main v-if="!Checked.check4">
                                <span style="font-size:12px;color:red;">未开启报警设置</span>
                            </el-main>
                            <el-main v-if="Checked.check4">
                                <el-form label-position="top">
                                    <el-form-item label="报警类型:">
                                        <el-select v-model="BaoJingTypeValue.value4" placeholder="请选择报警类型">
                                            <el-option v-for="(item,index) in BaoJingType" :key="index" :label="item.label" :value='item.value'>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="理想温度范围:" style="font-size:12px;">
                                        <div v-if="BaoJingTypeValue.value4 != '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value4.num" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>

                                        <div v-if="BaoJingTypeValue.value4 === '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value4.num1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                            ———
                                            <el-input-number v-model="BaoJingWenDuValue.value4.num2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="阈值">
                                        <el-input v-model="YuZhiValue.value4" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input>
                                        <div class="YuZhi-div">
                                            <el-select v-model="YuZhiDanWeiValue.value4" placeholder="请选择单位" class="YuZhi-div-select">
                                                <el-option v-for="(item,index) in YuZhiDanWei" :key="index" :label="item.label" :value='item.value'>
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                </el-form>
                            </el-main>
                        </el-container>

    </el-card >

<!-- 报警设备6 -->
<el-card class="box-card-min1" style="margin-left:10px;margin-top:20px">
      <el-container>
                            <el-header>报警设置-主警报6
                                <el-checkbox v-model="Checked.check5">备选项</el-checkbox>
                            </el-header>
                            <el-main v-if="!Checked.check5">
                                <span style="font-size:12px;color:red;">未开启报警设置</span>
                            </el-main>
                            <el-main v-if="Checked.check5">
                                <el-form label-position="top">
                                    <el-form-item label="报警类型:">
                                        <el-select v-model="BaoJingTypeValue.value5" placeholder="请选择报警类型">
                                            <el-option v-for="(item,index) in BaoJingType" :key="index" :label="item.label" :value='item.value'>
                                            </el-option>
                                        </el-select>
                                    </el-form-item>

                                    <el-form-item label="理想温度范围:" style="font-size:12px;">
                                        <div v-if="BaoJingTypeValue.value5 != '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value5.num" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>

                                        <div v-if="BaoJingTypeValue.value5 === '单温度范围-累计事件'">
                                            <el-input-number v-model="BaoJingWenDuValue.value5.num1" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                            ———
                                            <el-input-number v-model="BaoJingWenDuValue.value5.num2" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                            </el-input-number>
                                        </div>
                                    </el-form-item>

                                    <el-form-item label="阈值">
                                        <el-input v-model="YuZhiValue.value5" controls-position="right" :step="0.1" placeholder="请选择" style="width:150px;">
                                        </el-input>
                                        <div class="YuZhi-div">
                                            <el-select v-model="YuZhiDanWeiValue.value5" placeholder="请选择单位" class="YuZhi-div-select">
                                                <el-option v-for="(item,index) in YuZhiDanWei" :key="index" :label="item.label" :value='item.value'>
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </el-form-item>
                                </el-form>
                            </el-main>
                        </el-container>

        </el-card >


</el-card>
       
    </template>
    
    <script>
      import {adduser,role,tgood,equ,onetype,uptype} from '../api/api'
    
        export default {
    
            data(){
                return {
                    msg:'你好，这里是首页',
                    goodname:'',
                    des:'',
                    e_name:'',
                    role_list:[],
                    num:0,
                    rnum:0.5,
                    FixingFormRules: {
                // 验证延迟时间是否已5为单位是否合法
                start_time: [
                    { required: true, message: '请设置延迟时间', trigger: 'blur' },
                    { type: 'number', message: '最小单位：5分钟、范围 0~1275分钟', trigger: 'blur' }
                ],
                // 验证密码是否合法
                ent_time: [
                    { required: true, message: '请设置时间间隔', trigger: 'blur' },
                    { type: 'number', message: '最小单位：0.5分钟、范围 0.5~127.5分钟', trigger: 'blur' },
                ],
            },
            GenreForm: {

            },
            // 添加货物理想温度
            NumberData: {
                num1: '',
                num2: '',
            },
            // 报警类型
            BaoJingType: [
                { value: '单温上限-单个事件', label: '单温上限-单个事件' },
                { value: '单温下限-单个事件r', label: '单温下限-单个事件' },
                { value: '单温度范围-累计事件', label: '单温度范围-累计事件' }
            ],
            // 报警选择对应值
            BaoJingTypeValue: {
                value: '单温上限-单个事件',
                value1: '单温上限-单个事件',
                value2: '单温上限-单个事件',
                value3: '单温上限-单个事件',
                value4: '单温上限-单个事件',
                value5: '单温上限-单个事件',
            },
            // 报警对应温度理想值
            BaoJingWenDuValue: {
                value: { num: '', num1: '', num2: '' },
                value1: { num: '', num1: '', num2: '' },
                value2: { num: '', num1: '', num2: '' },
                value3: { num: '', num1: '', num2: '' },
                value4: { num: '', num1: '', num2: '' },
                value5: { num: '', num1: '', num2: '' },
            },
            // 选择阈值单位
            YuZhiDanWei: [
                { value: '分钟', label: '分钟' },
                { value: '小时', label: '小时' },
                { value: '天', label: '天' }
            ],
            // 阈值数据
            YuZhiValue: {
                value: '',
                value1: '',
                value2: '',
                value3: '',
                value4: '',
                value5: '',
            },
            // 报警设置中的阈值单位
            YuZhiDanWeiValue: {
                value: '',
                value1: '',
                value2: '',
                value3: '',
                value4: '',
                value5: '',
            },
            // 是否启用报警设置(第一个设置为true)
            Checked: {
                check: true,
                check1: false,
                check2: false,
                check3: false,
                check4: false,
                check5: false,
            },

                        
                }
            },
            //定义组建标签
            components:{
            },
            filters: {
     
　　},
            //自定义方法
            methods:{
            upptype:function(){
            var id=localStorage.getItem('tid')
            var params={'id':id,'goodname':this.goodname,'des':this.des,'dalaytime':this.num,'record':this.rnum,'mintemp':this.NumberData.num1,'maxtemp':this.NumberData.num2}
            uptype(params).then( res => {
                this.$Message(res.message)
         
        })
                }
    
            },
            //钩子方法
            mounted:function(){
    
              var receiveValue = this.$route.params.value
              var params={'id':receiveValue}
              onetype(params).then( res => {
                  console.log(res)
                  this.goodname=res[0]['goodname']
                  this.e_name=res[0]['name']
                  this.des=res[0]['des']
                  this.num=res[0]['dalaytime']
                  this.rnum=res[0]['record']
                  this.NumberData.num1=res[0]['mintemp']
                  this.NumberData.num2=res[0]['maxtemp']
                  localStorage.setItem('tid',res[0]['id'])


                  
                  
         
              })
       
                    

               
            },
            //监听属性
            watch:{
    
    
            },
            //计算属性
            computed:{
    
    
            }
    
    
    
        }
    
    
    </script>
    
    <style>

.box-card-min1{
    height:450px;
    width:400px;
    float:left;
 
    
    
 }
 .box-card-min{
    height:450px;
    width:450px;
 
    
    
 }
  .box-card{
        
        height:1600px;

    }
    
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .container-title {
    font-size: 20px;
    line-height: 32px;
    font-weight: normal;
    color: #39486c;
  }
  .fl {
    float: left;
  }
  .inp-box {
    font-size: 16px;
    line-height: 32px;
    margin-left: 30px;
}
 
 
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>